<template>
  <div>
    <div class="red_top_bg_new">
      <div class="back_left_new">
        <img src="@/assets/img/leftGray.png"  @click.stop="handleBack">
      </div>
      <div class="back_Mid">{{title}}</div>
      <div class="back_Right" @click="right_router">
        <slot></slot>
      </div>
    </div>
    <div style="height: 44px"></div>
  </div>
</template>
<script>
	export default {
		name: "bsHeader",
		props: {
			backurl: {
				type: [String, Number],
				default: -1
			},
			title: {
				type: [String],
				default: ""
			},
			routerurl: {
				type: [String],
				default: ""
			},
		},
		methods: {
			handleBack(e) {
				if (this.backurl != -1) {
					this.$router.push({
						path: this.backurl
					});
					return;
				}
				if (window.history.length > 1) {
					this.$router.go(-1)
				} else {
					this.$router.push({
						path: "index"
					})
				}

			},
			right_router(e) {
				if (this.routerurl != -1) {
					this.$router.push({
						path: this.routerurl
					});
					return;
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	.red_top_bg_new {
	    position: fixed;
	    top: 0;
	    z-index: 10;
		  background-color: #FFFFFF;
      display: flex;
      align-items: center;
      padding-left: 18px;
      padding-right: 18px;
      left: 0;
      right: 0;
      height: 44px;
    .back_left_new{
       flex: 1;
      img{
        width: 16px;
        height: 16px;
        display: block;
      }
    }
    .back_Mid{
      flex: 3;
      display: flex;
      justify-content: center;
      font-size: 16px;
      font-weight: bold;
    }
    .back_Right{
      flex: 1;
    }
	}
</style>
